<template>
  <div class="z-scroll-wrapper" :style="style" v-bind="$attrs">
    <div class="z-scroll-wrapper__box">
      <div class="z-scroll-wrapper__content">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="ZPagination">
import { computed } from '@vue/reactivity';

const props = defineProps({
  fixed: {
    type: Boolean,
    default: false
  }
})

const style = computed(()=>{
  let s = ``;
  if(props.fixed){
    s += `position: fixed;`
  }
  return s;
});

defineExpose({
});
</script>

<style lang="scss">
.z-scroll-wrapper{
  width: 100%;
  padding: 0 var(--rem-10) 0;
  border-bottom: 1rem solid var(--z-border-def);
  box-sizing: border-box;
  z-index: 1;
  background-color: var(--z-bg-def);
  transform: translateY(-1rem);
  .z-scroll-wrapper__box{
    width: 100%;
    &::-webkit-scrollbar{
      width: 0;
      display: none
    }
    overflow-x: auto;
  }
  .z-scroll-wrapper__content{
    width: 100%;
    display: flex;
    box-sizing: border-box;
    span{
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      height: var(--rem-35);
      text-align: center;
      color: var(--z-font-def);
      &.active{
        color: var(--z-font-anti);
        border-bottom: 1.5rem solid #3896ff;
      }
      &+span{
        margin-left: var(--rem-25);
      }
    }
  }
}
</style>
